<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td,
        th {
            border: 1px solid skyblue;
            text-align: center;
        }

        .box {
            width: 300px;
            height: 280px;
            background-color: skyblue;
            text-align: center;
        }

        .box div {
            padding-top: 10px;
        }
    </style>
</head>

<body>
    <table id="form">
        <tr>
            <th>商品ID</th>
            <th>商品价格</th>
            <th>商品名称</th>
            <th>商品照片</th>
            <th>商品详情：</th>
            <th>商品库存</th>
            <th>商品创建时间</th>
            <th>操作</th>

        </tr>

    </table>
    <div class="box">
        <div>商品照片：<input type="text" value="" id="goodsPhoto"></div>
        <div>商品名称：<input type="text" value="" id="goodsName"></div>
        <div>商品价格：<input type="text" value="" id="goodsPrice"></div>
        <div>创建时间：<input type="text" value="" id="goodsCreationTime"></div>
        <div>货物库存：<input type="text" value="" id="goodsInventory"></div>
        <div>商品详情：<input type="text" value="" id="goodSdetail"></div>
        <button class="qr">确定</button> <button class="qx">取消</button>
    </div>

    <div class="box_1">
    <div>商品照片：<input type="text" value="" id="goodPhoto"></div>
    <div>商品名称：<input type="text" value="" id="goodName"></div>
    <div>商品价格：<input type="text" value="" id="goodPrice"></div>
    <div>创建时间：<input type="text" value="" id="goodCreationTime"></div>
    <div>货物库存：<input type="text" value="" id="goodInventory"></div>
    <div>商品详情：<input type="text" value="" id="gooddetail"></div>
    <!-- <button class="qr">确定</button> <button class="qx">取消</button> -->
    </div>


    <script src="./jquery-3.7.1(2).js"></script>
    <script>
        $.ajax({
            url: "http://172.16.106.87:8080/ShowGoods",
            type: "get",
            data: {},
            success: function (itms) {
                // console.log(itms);
                let arr = itms.data
                arr.forEach(itms => {
                    let a = "";
                    a = `
          <tr>
            <td>${itms.goodsId}</td>
            <td>${itms.goodsPhoto}</td>
            <td>${itms.goodsName}</td>
            <td>${itms.goodsPrice}</td>
            <td>${itms.goodsCreationTime}</td>
            <td>${itms.goodsInventory}</td>
            <td>${itms.goodSdetail}</td>
            <td><button onclick="del(${itms.goodsId})">删除</button>
            <button onclick="xz()">新增</button>
            <button onclick="edit(${itms.goodsId})">编辑</button>
                </td>
        </tr>
            `
                    $("#form").append(a)
                })
            }
        })
        // 删除
        function del(id) {
            console.log(id);
            $.ajax({
                url: "http://172.16.106.87:8080/delGoods",
                type: "post",
                data: {
                    id: id
                },
                success: function (yf) {
                    console.log(yf);
                }
            })
            //  location.reload()
        }
        // 增加
        $(".box").hide()
        function xz() {
            $(".box").show()
        }
        $(".qr").click(function () {
            $.ajax({
                url: "http://172.16.106.87:8080/addGoods",
                type: "post",
                data: {
                    // id: id,
                    goodsPhoto: $("#goodPhoto").val(),
                    goodsName: $("#goodsName").val(),
                    goodsPrice: $("#goodsPrice").val(),
                    goodsCreationTime: $("#goodsCreationTime").val(),
                    goodsInventory: $("#goodsInventory").val(),
                    goodSdetail: $("#goodSdetail").val(),
                },
                success: function (ta) {
                    console.log(ta);
                    $(".box").hide()
                }
            })
        })
        // 编辑
        function edit(id) {
            console.log(id);
            $.ajax({
                url: "http://172.16.106.87:8080/upDataGoods",
                type: "post",
                data: {
                    goodsId: id,
                    goodsPhoto: $("#goodPhoto").val(),
                    goodsName: $("#goodName").val(),
                    goodsPrice: $("#goodPrice").val(),
                    goodsCreationTime: $("#goodCreationTime").val(),
                    goodsInventory: $("#goodInventory").val(),
                    goodSdetail: $("#gooddetail").val(),

                },
                success: function (itms) {
                    console.log(itms);
                    // $("#goodsPhoto").val(itms.goodsPhoto)
                    // $("#goodsName").val(itms.goodsName)
                    // $("#goodsPrice").val(itms.goodsPrice)
                    // $("#goodsCreationTime").val(itms.goodsCreationTime)
                    // $("#goodsInventory").val(itms.goodsInventory)
                    // $("#goodSdetail").val(itms.goodSdetail)
                    // $(".box").show()
                }
            })
        }
    </script>
</body>

</html>